<template>
  <div
    class="widget-job-list scrollbar-slinder black-bg color-white"
    @mouseenter="mouseover = true"
    @mouseleave="mouseover = false"
    ref="list"
  >
    <div
      class="
        widget-job-list-item
        flex
        justify-between
        align-center
        hover-active-alpha
        pointer
      "
      v-for="job in list"
      :key="job.id"
      @click.stop.prevent="$emit('click', job)"
    >
      <div class="widget-job-list-item-content relative">
        <div
          class="widget-job-list-item-title content-bold ellipsis nowrap"
          style="max-width: 100%"
        >
          {{ job.name || "暂无" }}
          <!-- {{ `${job.name}(上报)` }} -->
        </div>
        <div class="widget-job-list-item-time content">
          <!-- {{ job[startTime] }} -->
          类型:{{ job.type }}
        </div>
      </div>
      <div
        class="widget-job-list-item-status content"
        :class="findStatus(job.status).class"
        style="margin-left: 16px"
      >
        {{ job.color }}
      </div>
    </div>
  </div>
</template>

<script>
import { jobState } from "@/constants/status";
import differenceBy from "lodash/differenceBy";
export default {
  name: "WidgetJobList",
  props: {
    list: {
      type: Array,
      default: () => {
        return [];
      },
    },
    max: {
      type: Number,
      default: 20,
    },
    showImg: {
      type: Boolean,
      default: true,
    },
    timeType: {
      default: "createTime",
    },
    loopTime: {
      type: Number,
      default: 0,
    },
    jobTypes: {
      default: () => {
        return [];
      },
    },
  },
  data() {
    return {
      loopList: [],
      mouseover: false,
    };
  },
  watch: {
    // list: {
    // 	handler(n, o) {
    // 		if (this.loopTime <= 0) return;
    // 		const nw = differenceBy(n, o, "id");
    // 		this.loopList.unshift(...nw);
    // 		if (!this.timer) this.startLoop();
    // 	},
    // 	immediate: true
    // }
  },
  computed: {
    jobState,
    jobList() {
      return (this.loopTime > 0 ? this.loopList : this.list).map((i) => {
        do {
          if (!i.remark) break;
          const files = i?.files;
          if (!files) break;
          const file = Object.values(files)[0];
          if (!file) break;
          i.src = file[0]?.mappingPath;
        } while (false);

        return i;
      });
    },
  },
  beforeDestroy() {
    clearTimeout(this.timer);
  },
  methods: {
    findStatus(status) {
      return this.jobState.find((i) => i.label === status) || {};
    },
    async startLoop() {
      clearTimeout(this.timer);
      this.timer = null;
      if (!this.mouseover) this.toTop();
      if (this.loopTime <= 0) return;

      const last =
        this.loopList.splice(this.max - 1).shift() || this.loopList.pop();
      this.$nextTick(() => {
        if (last) this.loopList.unshift(last);
        this.timer = setTimeout(this.startLoop, this.loopTime);
      });
    },
    toTop() {
      const { list } = this.$refs;
      if (!list) return;
      list.scrollTo({
        top: 0,
        behavior: "smooth",
      });
    },
  },
};
</script>

<style lang="scss" scoped>
@import "@/styles/backgrounds.scss";
.widget-job-list {
  width: 420px;
  padding: 14px;
  &:hover {
    padding-right: 10px;
  }
  .widget-job-list-item {
    margin-bottom: 10px;
    padding: 5px 4px;
    .widget-job-list-item-img {
      width: 73px;
      height: 49px;
      flex-shrink: 0;
    }
    .widget-job-list-item-content {
      flex-grow: 1;
      flex-shrink: 1;
      line-height: 24px;
      min-width: 0;
    }
    .widget-job-list-item-status {
      padding: 6px 8px;
      // @extend .info-bg;
      color: black;
      border-radius: 10px;
      flex-shrink: 0;
    }
  }
}
</style>